<template>
  <!-- 新书上市 -->
  <div class="newBook-comtent">
    <div class="newBook-comtent-left">
      <img
        src="http://image.ituring.com.cn/0f36c7c0-a333-11eb-b7a9-b16899e368e1"
      />
    </div>

    <div class="newBook-comtent-right" v-if="select">
      <div
        class="newBook-oneBook"
        @click="handleBookClick(newBookItem.id)"
        v-for="newBookItem in newBookComtent"
        :key="newBookItem.id"
      >
        <div class="oneBookImg">
          <img
            v-lazy="`https://file.ituring.com.cn/Original/${newBookItem.coverKey}`"
          />
        </div>
        <div class="oneBook-text">
          <b class="oneBook-name">{{ newBookItem.name }}</b>
          <p class="oneBook-author">
            {{ newBookItem.authorNameString }}（作者）
          </p>
          <p class="oneBook-translator">
            {{
              newBookItem.translatorNameString
                ? `${newBookItem.translatorNameString}（译者）`
                : ''
            }}
          </p>
        </div>
      </div>
    </div>

    <!-- 点击前是隐藏的 -->
    <div class="newBook-comtent-right" v-else>
      <div
        class="newBook-oneBook"
        v-for="newBookSwitchItem in newBookSwitch"
        :key="newBookSwitchItem.id"
        @click="handleBookClick(newBookSwitchItem.id)"
      >
        <div class="oneBookImg">
          <img
            v-lazy="`https://file.ituring.com.cn/Original/${newBookSwitchItem.coverKey}`"
            :alt="newBookSwitchItem.name"
          />/
        </div>
        <div class="oneBook-text">
          <b class="oneBook-name">{{ newBookSwitchItem.name }}</b>
          <p class="oneBook-author">
            {{ newBookSwitchItem.authorNameString }}（作者）
          </p>
          <p class="oneBook-translator">
            {{
              newBookSwitchItem.translatorNameString
                ? `${newBookSwitchItem.translatorNameString}（译者）`
                : ''
            }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 请求
import API from '../../../API/recommendPage'
import '../../../assets/less/oneBook.less'
export default {
  name: 'NewBookComtent',
  data() {
    return {
      isShow: true,
      newBookSwitch: []
    }
  },
  async mounted() {
    const getNewBookSwitch = (await API.reqGetNewBookSwitch()).bookItems
    // console.log('getNewBookSwitch', getNewBookSwitch)
    this.newBookSwitch =Object.freeze(getNewBookSwitch)
  },
  props: {
    select: Boolean,
    newBookComtent: Array
  },
  methods: {
    handleBookClick(bookId) {
      this.$router.push({
        name: 'BookDetail',
        params: {
          bookId
        }
      })
    }
  }
}
</script>

<style lang='less'>
.newBook-comtent {
  width: 1080px;
  height: 560px;
  // border: 1px solid green;
  display: flex;
  justify-content: space-between;
}
.newBook-comtent-left {
  img {
    width: 255px;
    height: 560px;
    border-radius: 5px;
  }
}
.newBook-comtent-right {
  width: 825px;
  height: 560px;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  align-content: space-between;
  .newBook-oneBook {
    margin-left: 20px;
  }
}
</style>